<template>
  <div ref="graphWrapRef">
    <h2>我的第九个mxgraph</h2>
     <button @click="doExport2Console">在console中查看xml</button>
    <div id="graphcontainer9" ref="graphcontainer9" class="graphWrap graph-edit"></div>
  </div>
</template>

<script>
import mxgraph from '@/utils/mxgraph'
import graphMixin from './graphMixin'
const { mxEvent, mxRubberband, mxGraph, mxConstants, mxGraphModel,mxCellTracker } = mxgraph
const MxGraph = mxGraph
const MxRubberband = mxRubberband
const MxGraphModel = mxGraphModel

export default {
  mixins: [graphMixin],
  props: {
    msg: String,
  },
  data() {
    return {
      graph:null
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      // 
      var container = document.getElementById('graphcontainer9')
      mxEvent.disableContextMenu(container)
      const model = new MxGraphModel()
      const graph = new MxGraph(container, model)
      this.graph =graph
      graph.setTooltips(true);
     

      // Enables rubberband selection
      new MxRubberband(graph)
      //new mxCellTracker(graph,'red')
      this.initConnectEdge(graph)

      // Gets the default parent for inserting new cells. This
      // is normally the first child of the root (ie. layer 0).
      var parent = graph.getDefaultParent()

      // Adds cells to the model in a single step
      graph.getModel().beginUpdate()
      try {
       // mxConstants.HANDLE_FILLCOLOR = 'gray'
        var v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30)
        v1.geometry.relative = false
        var v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30);
        //graph.insertEdge(parent, null, '', v1, v2)
      } finally {
        // Updates the display
        graph.getModel().endUpdate()
      }
    },
  },
}
</script>
<style scoped>
.graphWrap {
  position: relative;
  overflow: hidden;
  width: 321px;
  height: 241px;
  cursor: default;
  border: 1px solid grey;
}
.graph-edit {
  background: url("/images/grid.gif");
}
.graph-browse {
  background: none;
}
</style>


